import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 圆弧线 AcrCurve
 *  继承自 椭圆弧线 EllipseCurve ，将x半径和y半径设置为相同，则得到正圆
 */
const geometry = new THREE.Geometry(); //  声明一个几何体对象

/**
 * 二维平面圆弧线
 * ArcCurve(
 *    aX, aY：圆心坐标（必填）
 *    aRadius：半径（必填）
 *    aStartAngle：起始角度（必填）
 *    aEndAngle：结束角度（必填）
 *    aClockwise：是否顺时针，默认为 false
 * )
 */
const arc = new THREE.ArcCurve(0, 0, 100, 0, Math.PI * 2);

// .getPoints 是基类 Curve 上的方法，返回一个 vector2 对象数组
const points = arc.getPoints(50); // 分段数50，得到51个顶点坐标数组
console.log(points);

// .setFromPoints 方法从 points 中提取数据改变几何体顶点属性 vertices
// 如果是 BufferGeometry 实例对象，则改变 geometory.attributes.position 属性
geometry.setFromPoints(points);
console.log(geometry);

const material = new THREE.LineBasicMaterial({
  color: 0x000000
});

/**
 * 绘制直线 两个顶点即可
 *  THREE.LineCurve3(v31, v32);
 * 二维直线
 *  THREE.LineCurve(v21, v22)
 */
const geometryLine = new THREE.Geometry();
const v31 = new THREE.Vector3(50, 0, 0);
const v32 = new THREE.Vector3(0, 70, 0);
const materialLine = new THREE.LineBasicMaterial({
  color: 0xff0000
});
// 如果通过模型直接绘制
// geometryLine.vertices.push(v31, v32);
// const line1 = new THREE.Line(geometryLine, materialLine);
// scene.add(line1);

// 通过 LineCurve3 绘制三维空间直线
// const lineCuve = new THREE.LineCurve3(v31, v32);
// const linePoints = lineCuve.getPoints(10);
// geometryLine.setFromPoints(linePoints);
// const mesh1 = new THREE.Line(geometryLine, materialLine);
// scene.add(mesh1);

// 通过 LineCurve 绘制二维直线
const lineCurve = new THREE.LineCurve(new THREE.Vector2(50, 0), new THREE.Vector2(0, 70));
const pointsLine = lineCurve.getPoints(10);
geometryLine.setFromPoints(pointsLine);
const mesh1 = new THREE.Line(geometryLine, materialLine);
scene.add(mesh1);


// 线条模型独享
const line = new THREE.Line(geometry, material);

scene.add(line);

const directionalL = new THREE.DirectionalLight(0xffffff, 1);
directionalL.position.set(300, 200, 200);
directionalL.target = scene;
scene.add(directionalL);

const axceH = new THREE.AxesHelper(200);
scene.add(axceH);

const k = innerWidth / innerHeight,
      s = 45,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(400, 400, 400);
camera.lookAt(scene.position);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xaaaaaa);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();
